<template>
     <div id="background">
         <div class="boss">
           <el-card class="box-card">
             <div slot="header" class="clearfix">
               <span style="color: #FFFFFF">登录</span>
             </div>
             <div class="form_body">
             <el-form  @submit.native.prevent  label-position='left' >
               <el-form-item id="labelColor" label="账户"    label-width="40px">
                 <el-input  v-model="username" placeholder="请输入你的账号"></el-input>
               </el-form-item>
               <el-form-item label="密码" label-width="40px">
                 <el-input v-model="password" placeholder="请输入你的密码" v-on:keyup.enter.native="login()" show-password ></el-input>
               </el-form-item>
               <!--<el-form-item class="confirmBtn">-->
               <el-button  style="width: 100%;letter-spacing: 20px " type="primary"  @click="login()">登录</el-button>
               <!--</el-form-item>-->
             </el-form>
             <el-divider id="bottom" style="margin: 0px">快速登录</el-divider>
              <ul class="thirdLogin">
                 <li>
                   <el-avatar class="wechat" :size="40" :src="wechat"></el-avatar>
                 </li>
                <li>
                  <el-avatar class="qq" :size="40" :src="qq"></el-avatar>
                </li>
              </ul>
             </div>
           </el-card>

         </div>

     </div>

</template>

<script >

  import   base64 from   '../common/Base64'
  import  commonUtils from  '../common/commonUtils'
  import {encryptByDESModeCBCend} from '../common/lib/js/tripledes'
  export default {
    name: 'login',
    data(){
      return{
        qq:"https://static.588ku.com/imgPath/public/images/Icon/iconSvgqq.svg",
        wechat:'https://static.588ku.com/imgPath/public/images/Icon/iconSvgwx.svg',
         username:'',
         password:'',
      }
    },
    methods:{
      login(){
        console.log("login...start...")
        if (!this.username) {
          var op = commonUtils.AlertOperationSuccess("请输入用户名！",1000)
          return;
        }
        if (!this.password) {
          var op = commonUtils.AlertOperationSuccess("请输入密码！",1000)
          return;
        }
          // this.$store.dispatch("login",{username:this.username,password:this.password})
        //写文章登录
        var login = {
          username: this.username,
          password: base64.encode(this.password)
        };
        var str = encryptByDESModeCBCend(login);
          this.axios.post("/login",{value:str}).then((success) =>{
            if (success.data.code == 0) {
              console.log("登录成功！！！！")
              console.log("查看this=>" + this);
              console.log("有query参数" + this.$route.query.id);
               if(typeof (this.$route.query.id) =='undefined' ){
                 //说明直接登录的 默认初始为0
                 this.$router.push("/write/"+0)
               }else {
                 //
                 this.$router.push("/write/"+this.$route.query.id)
               }

               return;
            }
            if (success.data.code == -2) {
                commonUtils.AlertOperationSuccess(success.data.result,1000)
            }

          }).catch((error) =>{
            commonUtils.AlertErrorMsg("登录失败,请联系网管!")
          })
      }

    }
  }
</script>

<style lang="scss" scoped>

  .form_body >>> .el-form-item__label{
     color: #ffffff;
  }

  .form_body{
     width: 100%;
     height: 100%;
  }

  #background{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../assets/msg_bg.png");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /*z-index: 900;*/
    /*z-index: 1100;*/
  }

  #background .boss{

      background-color: rgba(0,0,0,0.3);
      width: 35%;
      height: 51%;
      position: absolute;
      right: 0;
      left: 0;
      top: 0;
      bottom: 0;
    margin:  auto;
    /*z-index: 1;*/
  }

  #background .boss .el-card{
    background-color: rgba(0,0,0,0.1);
     width: 100%;
    height: 100%;
  }
  #background .boss .el-card__header{
     padding: 10px 20px;
  }
  #background  .boss .el-divider__text{
      border-radius: 10px;
  }

  #background .boss .clearfix{
      text-align: center;
     font-size: 20px;
     letter-spacing: 20px;
  }
 /*.boss .el-input{*/

 /*}*/

  #background .thirdLogin li{
       list-style: none;
      float: left;
       width: 46%;
    /*position: relative;*/


  }
  #background .wechat{
     float: right;
  }

  #background  .qq{
    float: left;
  }
  #background .thirdLogin li:nth-of-type(1) {
     margin-right: 2%;

  }

  #background .thirdLogin li:nth-of-type(2) {
    margin-left: 2%;


  }
  .form_body label{
     color: #ffffff;
  }
</style>
